<%--
  Created by IntelliJ IDEA.
  User: 95126
  Date: 2021/4/29
  Time: 8:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../imgs/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../imgs/css/bootstrap.min.css">
    <link rel="stylesheet" href="../imgs/css/all.min.css">
    <link rel="stylesheet" href="../imgs/css/animate.css">
    <link rel="stylesheet" href="../imgs/css/flaticon.css">
    <link rel="stylesheet" href="../imgs/css/magnific-popup.css">
    <link rel="stylesheet" href="../imgs/css/odometer.css">
    <link rel="stylesheet" href="../imgs/css/owl.carousel.min.css">
    <link rel="stylesheet" href="../imgs/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="../imgs/css/nice-select.css">
    <link rel="stylesheet" href="../imgs/css/main.css">

    <link rel="shortcut icon" href="../imgs/images/favicon.png" type="image/x-icon">

    <title>登录页面</title>


</head>

<body>
<!-- ==========Preloader========== -->
<div class="preloader">
    <div class="preloader-inner">
        <div class="preloader-icon">
            <span></span>
            <span></span>
        </div>
    </div>
</div>
<!-- ==========Preloader========== -->

<!-- ==========Sign-In-Section========== -->
<section class="account-section bg_img" data-background="../imgs/images/account/account-bg.jpg">
    <div class="container">
        <div class="padding-top padding-bottom">
            <div class="account-area">
                <div class="section-header-3">
                    <span class="cate">欢迎</span>
                    <h2 class="title">来到博莱特</h2>
                </div>
                <form class="account-form">
                    <div class="form-group">
                        <label for="phone">手机号<span>*</span></label>
                        <input type="text" placeholder="请输入手机号" onblur="check_phone()" id="phone">
                        <span id="p_error"></span>
                    </div>
                    <div class="form-group">
                        <label for="pwd">密码<span>*</span></label>
                        <input type="password" placeholder="请输入密码" id="pwd">
                        <span id="pwd_error"></span>
                    </div>
                    <div class="form-group checkgroup">
                        <input type="checkbox" id="bal2">
                        <label for="bal2">记住密码</label>
                        <a href="#0" class="forget-pass">忘记密码</a>
                    </div>
                    <div class="form-group text-center">
                        <button type="button" id="log_btn" class="btn btn-danger">log in</button>
                    </div>
                </form>
                <div class="option">
                    没有账户? <a href="${path}/user/register">现在注册</a>
                </div>
                <div class="or"><span>其他登录方式</span></div>
                <ul class="social-icons">
                    <li>
                        <a href="#0">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#0" class="active">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#0">
                            <i class="fab fa-google"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
<!-- ==========Sign-In-Section========== -->

<script src="../imgs/plugins/layui/layui.js"></script>
<script src="../imgs/js/jquery-3.3.1.min.js"></script>
<script src="../imgs/js/modernizr-3.6.0.min.js"></script>
<script src="../imgs/js/plugins.js"></script>
<script src="../imgs/js/bootstrap.min.js"></script>
<script src="../imgs/js/isotope.pkgd.min.js"></script>
<script src="../imgs/js/magnific-popup.min.js"></script>
<script src="../imgs/js/owl.carousel.min.js"></script>
<script src="../imgs/js/wow.min.js"></script>
<script src="../imgs/js/countdown.min.js"></script>
<script src="../imgs/js/odometer.min.js"></script>
<script src="../imgs/js/viewport.jquery.js"></script>
<script src="../imgs/js/nice-select.js"></script>
<script src="../imgs/js/main.js"></script>
<script>
    //校验手机号格式
    function check_phone(){
        let phone = $("#phone").val();
        let $phone = $("#p_error");
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            $phone.addClass("text-danger").text("× 手机号不合法，请重新输入");
            return false;
        }else{
            $phone.removeClass("text-danger").text("");
        }
        return true;
    }

    //校验密码
    function check_pwd(){
        let pwd = $("#pwd").val();
        let $pwd = $("#pwd_error");
        if(null == pwd||pwd.trim().length==0){
            $pwd.addClass("text-danger").text("× 密码不能为空，请重新输入");
            return false;
        }else {
            $pwd.removeClass("text-danger").text("");
        }
        return true;
    }


    $("#log_btn").on("click",function (){
        if(!check_phone()||!check_pwd()){
            return false;
        }
        let $phone = $("#p_error");
        let phone = $("#phone").val();
        let pwd = $("#pwd").val()
        let send_data = {"phone":phone,"password":pwd};
        console.log(send_data);
        $.ajax({
            type: "POST",  //方法类型
            dataType: "json",  //服务器返回的数据类型
            url:"${path}/user/login" ,
            data: send_data,
            success: function (result) {
                console.log(result);//打印服务端返回的数据(调试用)
                if (result.code == "200") {
                    $phone.removeClass("text-danger").text("");
                    //判断是否选择记住密码
                    if($("#bal2").prop("checked")){
                        localStorage.setItem("phone",phone);
                        localStorage.setItem("password",pwd);
                    }else {
                        localStorage.clear();
                    }
                    layui.use('layer', function(){
                        let layer = layui.layer;
                        layer.msg('<span style="font-weight:bold;color: black">登录成功！</span>', {icon:1,time: 2000 },function (){
                            //跳转到主页
                            window.location = "${path}/user/index";
                        });
                    });
                }else {
                    $phone.addClass("text-danger").text("× 手机号或密码错误");
                }
            },
            error : function() {
                alert("登录异常！");
            }
        });
    })

    $(function (){
        let phone = localStorage.getItem("phone");
        let pwd = localStorage.getItem("password");
        if(phone!=null&&pwd!=null){
            $("#bal2").prop("checked",true);
            $("#pwd").val(pwd);
            $("#phone").val(phone);

        }
    })
</script>

</body>

</html>
